<template>

  <div>

    <el-card>

      <el-alert
        title="需求说明"
        type="success"
        :closable="false"
        description="本页面主要实现实时在线看直播的功能，可以看常用的RTMP和M3U8相关的直播流">
      </el-alert>

    </el-card>


    <el-card style="margin-top: 10px">

      <div style="height: 500px; max-height: 500px;">

        <el-row :gutter="20">

          <!--可播放视频列表-->
          <el-col :span="12" >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-input placeholder="请输入m3u8地址" v-model.trim="inputPathM3u8" clearable size="mini"></el-input>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" size="mini" @click="inputPathM3u8Video">播放m3u8</el-button>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="12">
                <el-input placeholder="请输入FLV地址" v-model.trim="inputPathFlv" clearable size="mini"></el-input>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" size="mini" @click="inputPathFlvVideo">播放Flv</el-button>
                <el-button type="warning" size="mini" @click="openSaveLiveBroadcast">新增</el-button>
              </el-col>
            </el-row>

            <div style="height: 650px; max-height: 650px; overflow-y: auto; overflow-x: hidden;">
              <el-table
                :data="videoResourceList"
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="视频名称">
                </el-table-column>

                <el-table-column
                  prop="path"
                  label="地址">
                </el-table-column>

                <el-table-column
                  fixed="right"
                  label="操作"
                  width="180">
                  <template slot-scope="scope">
                    <el-button @click="playVideo(scope.row)" type="text" size="small">播放</el-button>
                    <el-button @click="openUpdLiveBroadcast(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                    <el-button @click="delLiveBroadcastByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                  </template>
                </el-table-column>

              </el-table>
            </div>

          </el-col>

          <el-col :span="12">
            <!--引入西瓜播放器-->
            <XiGuaPlayer ref="XiGuaPlayerRef"></XiGuaPlayer>
          </el-col>

        </el-row>

      </div>

    </el-card>

    <LiveBroadcastSaveUpd ref="liveBroadcastSaveUpdRef" @getLiveBroadcastList="getLiveBroadcastList"></LiveBroadcastSaveUpd>

  </div>


</template>

<script>

  import http from '@/utils/http'
  import XiGuaPlayer from '@/components/common/XiGuaPlayer.vue'
  import LiveBroadcastSaveUpd from './LiveBroadcastSaveUpd.vue'

  // 直播
  export default {
    name: "LiveBroadcast",
    components: {
      XiGuaPlayer,
      LiveBroadcastSaveUpd,
    },
    data(){
      return {
        // 可查看视频资源列表
        videoResourceList: [],
        // 输入的m3u8地址
        inputPathM3u8: null,
        // 输入的flv地址
        inputPathFlv: null,
      }
    },
    methods: {
      /**
       * 打开新增的弹出框
       */
      openSaveLiveBroadcast(){
        this.$refs.liveBroadcastSaveUpdRef.openPageLiveBroadcast('save', null)
      },
      /**
       * 打开修改的弹出框
       * @param row 当前行数据
       */
      openUpdLiveBroadcast(row){
        this.$refs.liveBroadcastSaveUpdRef.openPageLiveBroadcast('upd', row)
      },
      /**
       * 根据ID删除前的 提示信息
       */
      delLiveBroadcastByIdTips(row){
        this.$confirm('是否删除直播源信息, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delLiveBroadcastById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除直播源信息
       * @param row
       */
      delLiveBroadcastById(row){
        // console.log(row)
        http.post("/video/delLiveBroadcastById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getLiveBroadcastList()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 播放输入的视频 -m3u8
       */
      inputPathM3u8Video(){
        if (this.inputPathM3u8){
          this.$refs.XiGuaPlayerRef.playXiGua(this.inputPathM3u8, 'm3u8')
        }
      },
      /**
       * 播放输入的视频 -flv
       */
      inputPathFlvVideo(){
        if (this.inputPathFlv){
          this.$refs.XiGuaPlayerRef.playXiGua(this.inputPathFlv, 'flv')
        }
      },
      /**
       * 播放视频
       * @param row 当前数据
       */
      playVideo(row){
        if (row){
          if (row.path){
            this.$refs.XiGuaPlayerRef.playXiGua(row.path, 'flv')
          }
        }
      },
      /**
       * 读取可查看的视频的资源
       */
      getLiveBroadcastList(){
        http.post("/video/getLiveBroadcastList", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.videoResourceList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getLiveBroadcastList()
    },
  }
</script>

<style scoped>

</style>
